
$.extend({
  includePath: '',
  render: function(markdown, content_el, outline_el) {
    var vditor_js = "/press/static/js/vditor/index.min.js";
    var statis = [vditor_js];
    statis.push("/press/static/js/vditor/css/index.css");
    $.include(statis, (file) => {
      if(!content_el && !markdown) {
        return;
      }

      console.info(file);
      if(vditor_js != file) {
        return;
      }

      let a = Vditor.preview(content_el,
        markdown, {
          speech: {
            enable: true,
          },
          hljs: {
            enable: true,
            style: "native",
            lineNumber: true
          },
          anchor: 1,
          after () {
            if (window.innerWidth <= 768) {
              return;
            }
            // 显示大纲
            if(!outline_el) {
              return;
            }
            initOutline(content_el, outline_el);

            imageViewer();
          },
      });

    });
  }
});

const initOutline = (content_el, outline_el) => {
  Vditor.outlineRender(content_el, outline_el);
  if (outline_el.innerText.trim() !== '') {
    outline_el.style.display = 'block';
  } else {
    return;
  }

  const headingElements = []
  Array.from(content_el.children).forEach((item) => {
    if (item.tagName.length === 2 && item.tagName !== 'HR' && item.tagName.indexOf('H') === 0) {
        headingElements.push(item)
    }
  });

  let toc = []
  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY
    toc = []
    headingElements.forEach((item) => {
        toc.push({
        id: item.id,
        offsetTop: item.offsetTop,
        })
    })

    const currentElement = document.querySelector('.vditor-outline__item--current')
    for (let i = 0, iMax = toc.length; i < iMax; i++) {
        if (scrollTop < toc[i].offsetTop - 30) {
          if (currentElement) {
              currentElement.classList.remove('vditor-outline__item--current')
          }
          let index = i > 0 ? i - 1 : 0
          document.querySelector('span[data-target-id="' + toc[index].id + '"]').classList.add('vditor-outline__item--current')
          break
        }
    }
  })
}

const imageViewer = () => {

  var console = window.console || { log: function () {} };
  var $images = $('#article-content');
  var options = {
    // inline: true,
    url: 'src',
    ready: function (e) {
      console.log(e.type);
    },
    show: function (e) {
      console.log(e.type);
    },
    shown: function (e) {
      console.log(e.type);
    },
    hide: function (e) {
      console.log(e.type);
    },
    hidden: function (e) {
      console.log(e.type);
    },
    view: function (e) {
      console.log(e.type);
    },
    viewed: function (e) {
      console.log(e.type);
    }
  };

  $images.on({
    ready:  function (e) {
      console.log(e.type);
    },
    show:  function (e) {
      console.log(e.type);
    },
    shown:  function (e) {
      console.log(e.type);
    },
    hide:  function (e) {
      console.log(e.type);
    },
    hidden: function (e) {
      console.log(e.type);
    },
    view:  function (e) {
      console.log(e.type);
    },
    viewed: function (e) {
      console.log(e.type);
    }
  }).viewer(options);
}
